"use client"

import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Badge } from "@/components/ui/badge"

export function ThemeStatus() {
  const { theme, resolvedTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <Badge variant="outline">加载中...</Badge>
  }

  const getThemeLabel = () => {
    if (theme === "system") {
      return `跟随系统 (${resolvedTheme === "dark" ? "深色" : "浅色"})`
    }
    return theme === "dark" ? "深色模式" : "浅色模式"
  }

  return (
    <Badge variant="outline" className="text-xs">
      当前主题: {getThemeLabel()}
    </Badge>
  )
}
